<template>
	<view class="resume-container">
		<view class="page-header">
			<text class="header-title"></text>
		</view>
		<!-- 证书列表  -->
		<view class="form-item">
			<view class="cert-list">
				<view class="cert-item" v-for="(cert, index) in certificates" :key="index">
					<input type="text" v-model="certificates[index].name" placeholder="请输入证书名称"
						class="input cert-input" />
					<view class="upload-box" @click="chooseImage(index)">
						<image v-if="certificates[index].url" :src="certificates[index].url" mode="aspectFill"
							class="avatar"></image>
						<view v-else class="upload-placeholder">
							<text class="iconfont icon-camera"></text>
							<text class="upload-text">上传证书照片</text>
						</view>
					</view>
					<uni-icons class="delete-cert" @click="deleteCertificate(index)" type="closeempty"></uni-icons>
				</view>

			</view>
			<button class="add-cert-btn" @click="addCertificate">添加证书</button>
		</view>

		<!-- 按钮区域 -->
		<view class="btn-group">
			<button class="preview-btn" @click="submitForm">保存证书</button>
			<button class="submit-btn" @click="applyVerify">申请认定</button>
		</view>
		<view
			style="padding: 20rpx;border-radius: 10rpx;background-color: #f0f0f060;color: #484848;font-size: 26rpx;margin-top: 20rpx;text-indent: 1em;">
			申请认定后等待平台人工审核，审核时间为1-3个工作日，稍后您可以在消息中心查看的审核结果。</view>
		<pay-vue ref="payDialog" @alipayClick="toAlipay" @wechatPayClick="toWechatPay" @jsApiPay="jsApiPay"></pay-vue>
	</view>
</template>

<script>
	import payVue from '../mine/pay.vue';
	export default {
		components: {
			payVue
		},
		data() {
			return {
				certList: '',
				certificates: [], // 证书列表临时存储
				params: {},
				payOrder: {}
			};
		},
		onLoad(options) {
			uni.setNavigationBarTitle({
				title: "职业证书认定"
			})
			// uni.setNavigationBarColor({
			// 	frontColor: '#ffffff',
			// 	backgroundColor: '#FF8C42' // 修改为暖橙色
			// });
			this.getResumeData();
		},
		methods: {
			// 获取简历数据
			getResumeData(seeUserId) {
				this.$Request.postFormHost(this.$Api.getUserResume).then(res => {
					if (res.status === 0)
						this.certList = res.data.certList;
					if (this.certList === '')
						this.certificates.push({
							"name": '',
							"url": ''
						});
					else
						this.certificates = JSON.parse(this.certList);
				})

			},
			// 选择照片
			chooseImage(index) {
				uni.chooseImage({
					count: 1,
					sizeType: ['compressed'],
					sourceType: ['album', 'camera'],
					success: (res) => {
						const tempFilePath = res.tempFilePaths[0];

						// 上传图片
						this.uploadImage(tempFilePath, index);
					}
				});
			},

			// 上传图片
			uploadImage(filePath, index) {
				uni.showLoading({
					title: '上传中'
				});
				this.$Request.uploadFile(this.$Api.uploadCertFile, filePath)
					.then(res => {
						if (typeof res === 'string') {
							res = JSON.parse(res);
						}
						if (res.status == 0) {
							console.log(res.data);
							this.certificates[index].url = res.data;
							uni.showToast({
								title: '上传成功',
								icon: 'success'
							});
						} else
							uni.showToast({
								title: "上传失败",
								icon: 'error'
							})
					});

			},



			// 添加证书
			addCertificate() {
				this.certificates.push({
					name: '',
					url: ''
				});

			},

			// 删除证书
			deleteCertificate(index) {
				this.certificates.splice(index, 1);
			},


			// 处理简历数据
			processResumeData() {
				// 处理证书列表
				// 过滤空证书
				const validCerts = this.certificates.filter(cert => cert.trim() !== '');
				this.certList = JSON.stringify(validCerts);
			},

			submitForm() {

				// 处理证书列表
				const validCerts = this.certificates.filter(cert => cert.name.trim() !== '' && cert.url !== '');
				if (validCerts.length === 0) {
					uni.showToast({
						title: '请至少填写一个证书',
						icon: 'none'
					});
					return;
				}
				this.certList = JSON.stringify(validCerts);

				uni.showLoading({
					title: '保存中'
				});

				this.params.certList = this.certList;
				this.$Request.postFormHost(this.$Api.saveCertList, this.params)
					.then(
						res => {
							if (res.status == 0) {
								uni.showToast({
									title: "保存成功",
									icon: 'none'
								})
							}
						});
			},
			applyVerify() { //申请认定
				this.params.certList = this.certList;
				this.$Request.postFormHost(this.$Api.applyVerify, this.params)
					.then(
						res => {
							if (res.status == 0) {
								this.payOrder = res.data;
								this.$refs.payDialog.openDialog(this.payOrder);
							} else {
								uni.showToast({
									title: res.msg,
									icon: 'none'
								});
							}
						});
			},
			toAlipay() {
				this.$refs.payDialog.closeDialog();
				uni.navigateTo({
					url: '/pages/mine/payHtml?payType=2&payOrder=' + JSON.stringify(this.payOrder)
				})
				//this.checkPay();
			},
			toWechatPay() {
				this.$refs.payDialog.closeDialog();
				uni.navigateTo({
					url: '/pages/mine/payHtml?payType=1&payOrder=' + JSON.stringify(this.payOrder)
				});
			},
			jsApiPay() {
				this.$refs.payDialog.closeDialog();
				this.$Request.postFormHost(this.$Api.getJsApiPay, {
						"payOrderId": this.payOrder.id
					})
					.then(
						res => {
							if (res.status == 0) {
								// 发起小程序支付
								let param = res.data;
								uni.requestPayment({
									provider: 'wxpay',
									timeStamp: param.timeStamp,
									nonceStr: param.nonceStr,
									package: param.packageVal,
									signType: param.signType,
									paySign: param.paySign,
									success: function(res) {
										console.log('success:' + JSON.stringify(res));
									},
									fail: function(err) {
										console.log('fail:' + JSON.stringify(err));
									}
								});

							} else {
								uni.showToast({
									title: res.msg,
									icon: 'none'
								});
							}
						});
			},
		}
	};
</script>

<style>
	.resume-container {
		padding: 30rpx;
		background: linear-gradient(to bottom, #ffffff, #e73c3c);
		/* 更改为暖橙色背景 */
		min-height: 100vh;
		display: flex;
		flex-direction: column;
		align-items: center;
	}

	.page-header {
		padding: 20rpx 0 40rpx;
	}

	.header-title {
		font-size: 36rpx;
		font-weight: bold;
		color: #ff3a3d;
		/* 更改为暖橙色 */
	}

	.header-subtitle {
		font-size: 24rpx;
		color: #999;
		margin-top: 10rpx;
	}

	.form-container {
		background-color: #fff;
		border-radius: 12rpx;
		padding: 20rpx;
		box-shadow: 0 2rpx 10rpx rgba(0, 0, 0, 0.05);
	}

	.form-item {
		margin-bottom: 30rpx;
	}

	.item-label {
		display: block;
		font-size: 28rpx;
		color: #333;
		margin-bottom: 15rpx;
		font-weight: 500;
	}

	.upload-box {
		width: 180rpx;
		height: 180rpx;
		border: 1rpx dashed #FFB061;
		/* 更改为浅橙色 */
		border-radius: 8rpx;
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;
		background-color: #FFF8F0;
		/* 更改为浅橙色背景 */
		margin-left: 10rpx;
	}

	.upload-placeholder {
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;
	}

	.iconfont {
		font-size: 50rpx;
		color: #FF8C42;
		/* 更改为暖橙色 */
	}

	.upload-text {
		font-size: 24rpx;
		color: #999;
		margin-top: 10rpx;
	}

	.avatar {
		width: 180rpx;
		height: 180rpx;
		border-radius: 8rpx;
	}

	.picker {
		flex: 1;
		margin: 0 10rpx;
	}

	.picker:first-child {
		margin-left: 0;
	}

	.picker:last-child {
		margin-right: 0;
	}

	.picker-value {
		border: 1rpx solid #FFB061;
		/* 更改为浅橙色 */
		border-radius: 8rpx;
		padding: 16rpx;
		font-size: 28rpx;
		color: #333;
	}

	.cert-list {
		margin-top: 10rpx;
	}

	.cert-item {
		display: flex;
		align-items: center;
		margin-bottom: 15rpx;
		padding: 10rpx;
		background-color: #e8e8e8a0;
		border-bottom: solid 1rpx #d5d4c7;
		border-radius: 10rp;
		/* 更改为浅橙色 */
	}

	.cert-input {
		flex: 1;
		border-bottom: solid 1rpx #2f2011;
		/* 更改为浅橙色 */
	}

	.delete-cert {
		width: 60rpx;
		height: 60rpx;
		line-height: 60rpx;
		text-align: center;
		color: #FF8C42;
		/* 更改为暖橙色 */
		font-size: 40rpx;
		margin-left: 10rpx;
	}

	.add-cert-btn {
		width: 30vw;
		background-color: #FFF8F0;
		/* 更改为浅橙色背景 */
		color: #FF8C42;
		/* 更改为暖橙色 */
		font-size: 28rpx;
		padding: 15rpx 0;
		border-radius: 8rpx;
		border: 1rpx dashed #FFB061;
		/* 更改为浅橙色 */
		margin-top: 10rpx;
	}

	.btn-group {
		display: flex;
		flex-direction: row;
		justify-content: space-between;
		margin-top: 40rpx;
	}

	.preview-btn {
		width: 30vw;
		background-color: #fff;
		color: #FF8C42;
		/* 更改为暖橙色 */
		font-size: 32rpx;
		padding: 10rpx;
		border-radius: 8rpx;
		border: 1px solid #FF8C42;
		/* 更改为暖橙色 */
	}


	.submit-btn {
		width: 30vw;
		background-color: #ff3a3d;
		/* 更改为暖橙色 */
		color: #fff;
		font-size: 32rpx;
		padding: 10rpx;
		border-radius: 8rpx;
		margin-left: 20rpx;
	}
</style>